<template>
	<div>
		<h1>
			用户管理
		</h1>
		<table border="1">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			<tr v-for="item in list" :key='item.id'>
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
				<td @click="operclick(item.id)">
					<a href="javascript:;">{{item.oper}}</a>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					name: '张三',
					age: '12',
					oper: '详情'
				}, {
					id: 2,
					name: '李四',
					age: '14',
					oper: '详情'
				}, {
					id: 3,
					name: '王五',
					age: '14',
					oper: '详情'
				}, {
					id: 4,
					name: '孙六',
					age: '16',
					oper: '详情'
				}, {
					id: 5,
					name: '赵七',
					age: '17',
					oper: '详情'
				}]
			}
		},
		methods: {
			operclick(i) {
				console.log(i)
				// 编程式导航 带参数跳转
				this.$router.push('/user_details/' + i)
			}
		}
	}
</script>

<style>
</style>
